<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">      
       <school></school>
        
    </div>

</body>

<script type="text/javascript">
    Vue.config.performance = false

    // 构造函数
    function Demo(){
        this.a = 1
        this.b = 2
    }
    const d = new Demo()
    console.log(Demo.prototype) // 显示 原型属性
    console.log(d.__proto__) // 隐式 原型属性
    console.log(d.__proto__ === Demo.prototype)  // true


    Demo.prototype.x = 99
    console.log(d.__proto__.x)
    console.log('@',d)

    Vue.prototype.x=99

    const school = Vue.extend({
        // el:'#root', --一定不要写el
        template: `
            <div>
                <h4>学校名称：{{schoolName}}</h4>
                <h4>学校地址：{{addr}}</h4>     
                <button @click="showX">点击显示vm的x</button>          
            </div>
        `,
        data(){
            return {
                schoolName:'浙大',
                addr:'浙江杭州',
            }
        },
        methods:{
            showX(){
                console.log(this)
                alert(this.x)
            }
        }
        
    });

    //创建vm
    const vm = new Vue({
        el:'#root',
        components:{
            school
        },
    
    })

    console.log(school.prototype.__proto__ === Vue.prototype) // true
    console.log(school.prototype.__proto__ === vm.prototype) // false
    
</script>
</html>